.team-card-wrapper {
  padding: 12px 0;
  border-bottom: 1px solid #383838;
  display: grid;
  grid-template-columns: 3fr 1fr;
  margin-top: 8px;
}

.team-card-wrapper:last-child {
  border-bottom: none;
}

.team-card-team-info-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;

  .team-card-team-name {
    color: var(--requestly-color-text-default);
    font-size: var(--requestly-font-size-sm, 13px);
    font-weight: 500;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .team-card-team-members-count {
    font-size: var(--requestly-font-size-xs, 11px);
    color: var(--neutrals-gray-300);
  }
}

.team-card-join-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .ant-btn {
    padding: 8px 12px;
  }

  .team-card-join-btn-loader {
    font-size: 1rem;
    color: var(--requestly-color-text-default);
  }

  .ant-btn.team-card-join-btn-dark-bg {
    background: var(--surface-0);
    cursor: not-allowed;
    pointer-events: none;
  }
}

.team-card-joined-tag {
  color: var(--requestly-color-success);
  display: flex;
  align-items: center;
  gap: 4px;

  & svg {
    width: 18px;
    height: 18px;
  }

  & span {
    font-size: var(--requestly-font-size-sm, 13px);
    font-weight: 500;
  }
}
